import React, { FC, useEffect, useState } from 'react';
import { extractQuestions } from '../utils';
import { MathQuestions } from './MathQuestion';

export type AppProps = {
  value?: string
}

export const App: FC<AppProps> = ({value}: AppProps): JSX.Element => {
  const [source, setSource] = useState(value || '');
  
  const [questions, setQuestions] = useState<string[]>([]);
  const [inputColumns, setInputColumns] = useState(3);
  const [renderColumns, setRenderColumns] = useState(3);
  
  useEffect(() => {
    setQuestions(extractQuestions(source, inputColumns));
  }, [source, inputColumns]);
  
  return (
    <div>
      <div className='question-input'>
        <label>
          <div>
            输入原始内容（一行 <select value={inputColumns} onChange={e => setInputColumns(parseInt(e.target.value))}>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
          </select> 列）：
          </div>
          <textarea rows={5} className='source-input' value={source} onChange={e => setSource(e.target.value)}/>
        </label>
      </div>
      <div>
        重新排版结果（一行 <select value={renderColumns} onChange={e => setRenderColumns(parseInt(e.target.value))}>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
      </select> 列）：
      </div>
      <MathQuestions questions={questions} columns={renderColumns} isPurge={true}/>
    </div>
  );
};